import React, { lazy } from "react";
import { Navigate } from "react-router-dom";
// 注意这种报红可能是将组件的index文件后缀写成jsx了，改成tsx即可
import Login from '../Components/Login'
// import Home from "@/views/Home";
// import About from "@/views/About"

// 懒加载写法，注意在路由表中的组件外面包裹Suspense组件
const Home = lazy(() => import("@/views/Home"))
const About = lazy(() => import("@/views/About"))
const Page1 = lazy(() => import("@/views/Page1"))
const Page2 = lazy(() => import("@/views/Page2"))
const NotFoundPage = lazy(() => import("@/Components/NotFoundPage"))

const commonEle = (ele: JSX.Element) => {
  return (
    <React.Suspense fallback={<div>loading...</div>}>{ele}</React.Suspense>
  )
}

const routes = [
  {
    path: '/',
    element: <Navigate to='/home' />
  },
  {
    path: '/home',
    // element: <Home />
    // element: <React.Suspense fallback={<div>loading...</div>}><Home /></React.Suspense>
    element: commonEle(<Home />),
    children: [
      {
        path: '/home',
        element: <Navigate to='page1' />
      },
      {
        path: 'page1',
        element: commonEle(<Page1 />),
      },
      {
        path: 'page2',
        element: commonEle(<Page2 />),
      },
    ]
  },
  {
    // 配置404页面
    path: '*',
    element: commonEle(<NotFoundPage />),
  },
  {
    path: '/login',
    element: <Login />,
  }
]

export default routes